import React, { PureComponent } from "react";
import {
  Form,
  Input,
  Row,
  Col,
  Select,
  Button,
  Upload,
  Icon,
  notification
} from "antd";
import Req from "../../common/Req";
export default class AddProduct extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      productImgList: [],
      productIntroduceList: [],
      productTypes: [],

      productTypeid: "未选择",
      productName: "",
      productDesc: "",
      productSpec: "",
      productImgs: [],
      productIntroduce: ""
    };
  }

  /**获取所有的商品类型 */
  loadTypes() {
    Req(
      "http://localhost:8080/products/alltypes",
      {},
      this.props.history,
      resp => this.setState({ productTypes: resp.data })
    );
  }
  componentWillMount() {
    this.loadTypes();
  }

  render() {
    return (
      <div style={{ margin: 15 }}>
        <Form>
          <Form.Item>
            <Row>
              <Col span={3}>产品名称</Col>
              <Col span={8}>
                <Input
                  onChange={e => this.setState({ productName: e.target.value })}
                />
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Row>
              <Col span={3}>产品描述</Col>
              <Col span={8}>
                <Input
                  onChange={e => this.setState({ productDesc: e.target.value })}
                />
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Row>
              <Col span={3}>产品类型</Col>
              <Col span={8}>
                <Select
                  value={this.state.productTypeid}
                  onChange={e => this.setState({ productTypeid: e })}
                >
                  {this.state.productTypes.map((item, index) => (
                    <Select.Option key={index} value={item.id}>
                      {item.typeName}
                    </Select.Option>
                  ))}
                </Select>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Row>
              <Col span={3}>产品属性</Col>
              <Col span={8}>
                <Input.TextArea
                  rows={4}
                  onChange={e => this.setState({ productSpec: e.target.value })}
                />
                <a
                  href="https://gitee.com/Jhinwins/equipment_eb/blob/master/src/common/specificationExa.json"
                  target="_block"
                >
                  点击查看模板数据
                </a>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Row>
              <Col span={3}>产品图片</Col>
              <Col span={8}>
                <Upload
                  action="//localhost:8080/products/upload"
                  listType="picture-card"
                  fileList={this.state.productImgList}
                  data={{ cusName: new Date().getTime() }}
                  beforeUpload={file => {
                    //无法修改要上传文件名,只能通过上传一个新的参数作为文件名
                    console.log(file.name);
                  }}
                  onChange={({ fileList }) => {
                    let productImgs = [];
                    for (var i = 0; i < fileList.length; i++) {
                      productImgs.push(fileList[i].name);
                    }
                    this.setState({ productImgs: productImgs });
                    this.setState({ productImgList: fileList });
                  }}
                >
                  {this.state.productImgList.length >= 5 ? null : (
                    <div>
                      <Icon type="plus" />
                      <div className="ant-upload-text">Upload</div>
                    </div>
                  )}
                </Upload>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Row>
              <Col span={3}>产品介绍</Col>
              <Col span={8}>
                <Upload
                  action="//localhost:8080/products/upload"
                  listType="picture-card"
                  fileList={this.state.productIntroduceList}
                  data={{ cusName: new Date().getTime() }}
                  onChange={({ fileList }) => {
                    if (fileList.length > 0) {
                      this.setState({ productIntroduce: fileList[0].name });
                    }
                    this.setState({ productIntroduceList: fileList });
                  }}
                >
                  {this.state.productIntroduceList.length >= 1 ? null : (
                    <div>
                      <Icon type="plus" />
                      <div className="ant-upload-text">Upload</div>
                    </div>
                  )}
                </Upload>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Button
              onClick={() => {
                /**将json字符串转换为json对象 */
                let datas = this.state;
                try {
                  let productSpec = JSON.parse(datas.productSpec);
                  datas.productSpec = productSpec;
                  console.log(datas);
                  Req(
                    "http://localhost:8080/products/addproduct",
                    {
                      method: "POST",
                      headers: {
                        "Content-type": "application/json"
                      },
                      body: JSON.stringify(this.state)
                    },
                    this.props.history,
                    resp => {
                      if (resp.code === 100 && resp.data.prodictid > 0)
                        notification["success"]({
                          message: "商品添加成功",
                          description: `添加成功，id=${resp.data.prodictid}`
                        });
                      else
                        notification["error"]({
                          message: "商品添加失败",
                          description: "未知原因"
                        });
                    }
                  );
                } catch (e) {
                  notification["error"]({
                    message: "商品添加失败",
                    description: "规格配置出错"
                  });
                  return;
                }
              }}
            >
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
